<template>
  <div class="newslist">
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
       <router-link :to="'/home/NewsInfo/'+item.id">
           <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
           <h3>{{item.title}}</h3>
            <p class="mui-ellipsis">
                <span>发表时间:{{item.add_time | dataFomat}}</span>
                <span>点击:{{item.click}}次</span>
            </p>
          </div>
       </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
    data(){
        return{
            newslist:[]
        }
    },
    created(){
        this.getNewsList();
    },
    methods:{
       async getNewsList(){
          await  this.$http.get("api/getnewslist").then((result) => {
                if (result.data.status ===0) {
                    this.newslist = result.data.message;
                }else{
                    this.$toast.center('新闻列表数据加载失败');
                }
            });
        }
    }
};
</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
h3{
    font-size: 13px;
}
.mui-ellipsis{
    display: flex;
    justify-content: space-between;
    color: blueviolet;
}
</style>
